Integratie van JavaScript-ontwikkeltools: VS Code-extensieontwikkeling

Visual Studio Code (VS Code) is een dominante kracht geworden in de wereld van code-editors, geliefd bij ontwikkelaars over de hele wereld vanwege zijn flexibiliteit, rijke ecosysteem van extensies en robuuste functieset. Een belangrijk aspect van de kracht van VS Code ligt in de uitbreidbaarheid, waardoor ontwikkelaars de IDE kunnen aanpassen aan hun specifieke behoeften en workflows. Dit artikel biedt een uitgebreide gids voor de integratie van JavaScript-ontwikkeltools door middel van VS Code-extensieontwikkeling, en behandelt alles van de basisprincipes tot geavanceerde technieken.

Waarom VS Code-extensies voor JavaScript ontwikkelen?

Het ontwikkelen van VS Code-extensies voor JavaScript biedt tal van voordelen die individuele ontwikkelaars, teams en de bredere JavaScript-gemeenschap ten goede komen.

• Verhoogde productiviteit: Automatiseer repetitieve taken, stroomlijn workflows en verminder handmatig werk, zodat ontwikkelaars zich kunnen concentreren op de kernlogica en creatieve probleemoplossing.
• Aangepaste codeeromgeving: Pas de IDE aan op specifieke projectvereisten, codeerstijlen en persoonlijke voorkeuren, wat zorgt voor een comfortabelere en efficiëntere ontwikkelervaring.
• Verbeterde codekwaliteit: Integreer linters, formatters en code-analysetools rechtstreeks in de editor, wat zorgt voor codeconsistentie, het identificeren van potentiële fouten en het promoten van best practices.
• Naadloze toolintegratie: Breng externe tools en services rechtstreeks naar VS Code, zoals buildsystemen, testframeworks en cloudplatforms, en creëer zo een uniforme en geïntegreerde ontwikkelomgeving.
• Bijdrage aan de gemeenschap: Deel uw extensies met de bredere JavaScript-gemeenschap, waardoor andere ontwikkelaars kunnen profiteren van uw werk en samenwerking en innovatie worden gestimuleerd.

Basisprincipes van VS Code-extensieontwikkeling

Voordat we in de technische details duiken, bespreken we de essentiële concepten en tools die nodig zijn voor de ontwikkeling van VS Code-extensies.

Vereisten

• Node.js en npm (of yarn): Node.js biedt de JavaScript runtime-omgeving, en npm (Node Package Manager) of yarn wordt gebruikt voor het beheren van projectafhankelijkheden. Zorg ervoor dat u de nieuwste versies hebt geïnstalleerd. Download van nodejs.org.
• VS Code: Uiteraard heeft u VS Code zelf nodig. Download van code.visualstudio.com.
• Yeoman en de VS Code Extension Generator: Yeoman is een scaffolding-tool die het aanmaken van nieuwe projecten vereenvoudigt. De VS Code Extension Generator biedt een vooraf geconfigureerd sjabloon voor VS Code-extensies. Installeer ze globaal met npm:

              npm install -g yo generator-code
              
  
                
                  Copy
                
              
            

Extensiemanifest (package.json)

Het package.json-bestand is het hart van uw extensie. Het definieert de metadata, afhankelijkheden en activeringsevents van de extensie. Belangrijke eigenschappen zijn onder andere:

• name: De unieke identificatie van uw extensie.
• displayName: De voor mensen leesbare naam die wordt weergegeven in de VS Code Marketplace en de extensielijst.
• description: Een korte beschrijving van het doel van de extensie.
• version: Het versienummer van de extensie.
• publisher: Uw uitgever-ID (vereist voor publicatie in de VS Code Marketplace).
• engines.vscode: De minimaal vereiste VS Code-versie voor de extensie.
• activationEvents: Een array van events die de activering van uw extensie activeren. Veelvoorkomende events zijn onCommand:yourCommandId, onLanguage:languageId en * (activeert bij opstarten). Het gebruik van specifieke activeringsevents is cruciaal voor de prestaties.
• main: Het pad naar het hoofd-JavaScript-bestand dat de code van uw extensie bevat.
• contributes: Een object dat de bijdragen van de extensie aan VS Code definieert, zoals commando's, menu's, instellingen en weergaven.
• dependencies: Een lijst met npm-pakketten waarvan uw extensie afhankelijk is.
• devDependencies: Een lijst met npm-pakketten die nodig zijn voor de ontwikkeling, zoals testframeworks en build-tools.

Voorbeeld van een package.json-fragment:

            {
  "name": "my-javascript-tools",
  "displayName": "My JavaScript Tools",
  "description": "A collection of useful JavaScript development tools.",
  "version": "0.0.1",
  "publisher": "my-publisher",
  "engines": {
    "vscode": "^1.70.0"
  },
  "activationEvents": [
    "onCommand:my-javascript-tools.formatCode",
    "onLanguage:javascript"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-javascript-tools.formatCode",
        "title": "Format JavaScript Code"
      }
    ]
  },
  "dependencies": {
    "prettier": "^2.7.0"
  },
  "devDependencies": {
    "@types/vscode": "^1.70.0",
    "typescript": "^4.7.0"
  }
}
            

              
                Copy
              
            
          

Extensie-API

De VS Code Extensie-API biedt een rijke set interfaces en functies voor interactie met de editor, toegang tot de functies ervan en het manipuleren van het gedrag. Maak uzelf vertrouwd met de kernconcepten van de API, waaronder:

• vscode.commands: Registreer en voer commando's uit.
• vscode.languages: Registreer taalfuncties, zoals code-aanvulling, hovers en diagnostiek.
• vscode.window: Communiceer met het editorvenster, toon berichten en vraag om gebruikersinvoer.
• vscode.workspace: Krijg toegang tot werkruimte-gerelateerde informatie, zoals bestanden, mappen en instellingen.
• vscode.debug: Breid de debugging-mogelijkheden uit.
• vscode.scm: Integreer met broncodebeheersystemen.

Activeringsevents

Activeringsevents zijn cruciaal om te bepalen wanneer uw extensie wordt geladen en geactiveerd. Het gebruik van specifieke activeringsevents kan de opstartprestaties van VS Code aanzienlijk verbeteren. Veelvoorkomende activeringsevents zijn:

• onCommand:<commandId>: Activeert wanneer een specifiek commando wordt uitgevoerd.
• onLanguage:<languageId>: Activeert wanneer een bestand van een specifieke taal wordt geopend.
• onFileSystem:<scheme>: Activeert wanneer een bestand met een specifiek bestandssysteemschema wordt geopend (bijv. file, git, ftp).
• onDebug: Activeert wanneer de debugger wordt gestart.
• onTest: Activeert wanneer tests worden uitgevoerd.
• onView:<viewId>: Activeert wanneer een specifieke weergave zichtbaar is in de zijbalk.
• *: Activeert bij opstarten (gebruik dit spaarzaam, omdat het de prestaties kan beïnvloeden).

Uw eerste VS Code-extensie maken

Laten we het proces doorlopen voor het maken van een eenvoudige VS Code-extensie die JavaScript-code formatteert met Prettier.

De extensie scaffolden

1. Open een terminal en navigeer naar de map waar u uw extensie wilt maken.
2. Voer de VS Code Extension Generator uit:

               yo code
               
   
                 
                   Copy
                 
               
             

3. Beantwoord de prompts:
   • Kies New JavaScript Extension.
   • Voer de extensienaam in (bijv. javascript-formatter).
   • Voer de extensie-identifier in (bijv. javascript-formatter).
   • Voer een beschrijving in (bijv. Formatteert JavaScript-code met Prettier.).
   • Kies of u TypeScript wilt inschakelen (voor dit voorbeeld gebruiken we JavaScript, maar TypeScript wordt sterk aanbevolen voor grotere projecten).
   • Kies of u een Git-repository wilt initialiseren.

Prettier installeren

Installeer Prettier als een afhankelijkheid voor uw extensie:

            cd javascript-formatter
npm install prettier --save
            

              
                Copy
              
            
          

De formatteringslogica implementeren

Open het extension.js-bestand. Dit bestand bevat de kernlogica van uw extensie. Vervang de bestaande code door het volgende:

            const vscode = require('vscode');
const prettier = require('prettier');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Gefeliciteerd, uw extensie \"javascript-formatter\" is nu actief!');

	let disposable = vscode.commands.registerCommand('javascript-formatter.formatCode', async () => {
		const editor = vscode.window.activeTextEditor;
		if (!editor) {
			vscode.window.showInformationMessage('Geen actieve teksteditor.');
			return;
		}

		const document = editor.document;
		const text = document.getText();

		try {
			const formattedText = prettier.format(text, {
				parser: 'babel',
				tabWidth: 2,
				semi: true,
				singleQuote: true,
				railingComma: 'es5',
				bracketSpacing: true,
				arrowParens: 'always',
				printWidth: 80
			});

			editor.edit(editBuilder => {
				editBuilder.replace(new vscode.Range(
					document.positionAt(0),
					document.positionAt(text.length)
				), formattedText);
			});
		} catch (error) {
			vscode.window.showErrorMessage(`Fout bij het formatteren van code: ${error.message}`);
		}
	});

	context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

            

              
                Copy
              
            
          

Het package.json-bestand bijwerken

Wijzig het package.json-bestand om het commando te registreren en het activeringsevent op te geven. Voeg het volgende toe aan de contributes-sectie:

            "contributes": {
  "commands": [
    {
      "command": "javascript-formatter.formatCode",
      "title": "JavaScript-code formatteren"
    }
  ]
},
            

              
                Copy
              
            
          

En werk de activationEvents-sectie bij:

            "activationEvents": [
  "onCommand:javascript-formatter.formatCode",
  "onLanguage:javascript"
],
            

              
                Copy
              
            
          

De extensie testen

1. Druk op F5 om de extensie te starten in een nieuw VS Code-venster (de Extension Development Host).
2. Open een JavaScript-bestand in de Extension Development Host.
3. Druk op Ctrl+Shift+P (of Cmd+Shift+P op macOS) om het commandopalet te openen.
4. Typ JavaScript-code formatteren en selecteer het commando.
5. De JavaScript-code in de actieve editor zou nu geformatteerd moeten zijn met Prettier.

Geavanceerde technieken voor de ontwikkeling van VS Code-extensies

Zodra u de basis onder de knie heeft, kunt u meer geavanceerde technieken verkennen om geavanceerde en krachtige VS Code-extensies te maken.

Language Server Protocol (LSP)

Het Language Server Protocol (LSP) definieert een gestandaardiseerde manier voor taalservers om te communiceren met IDE's. Door LSP te gebruiken, kunt u geavanceerde taalfuncties bieden, zoals:

• Code-aanvulling (IntelliSense): Stel relevante code-aanvullingen voor op basis van de huidige context.
• Ga naar definitie: Navigeer naar de definitie van een symbool.
• Zoek alle verwijzingen: Vind alle voorkomens van een symbool in de werkruimte.
• Hernoem symbool: Hernoem een symbool en werk alle verwijzingen bij.
• Code-diagnostiek (linting en foutcontrole): Identificeer potentiële fouten en geef suggesties voor verbetering.

Bibliotheken zoals vscode-languageserver vereenvoudigen de ontwikkeling van op LSP gebaseerde extensies.

Ondersteuning voor debugging

VS Code biedt een krachtige debugging-API waarmee u de debugging-mogelijkheden kunt uitbreiden. U kunt:

• Aangepaste debug-adapters maken: Ondersteun het debuggen van aangepaste talen of runtimes.
• Debug-configuraties bijdragen: Bied vooraf geconfigureerde debug-configuraties voor specifieke projecttypen.
• Aangepaste debug-weergaven toevoegen: Toon debugging-informatie in aangepaste weergaven.

Werken met webviews

Met webviews kunt u webgebaseerde UI's insluiten in VS Code. Dit is handig voor het maken van complexe configuratiepanelen, interactieve documentatieviewers of visualisaties. U kunt HTML, CSS en JavaScript gebruiken om de UI te bouwen en te communiceren met de backend van de extensie via message passing.

Instellingen en configuratie

Sta gebruikers toe het gedrag van uw extensie aan te passen via instellingen. Definieer instellingen in de contributes.configuration-sectie van het package.json-bestand. Krijg toegang tot instellingen met de vscode.workspace.getConfiguration()-API.

Uw extensie testen

Het grondig testen van uw extensie is cruciaal om de kwaliteit en betrouwbaarheid ervan te waarborgen. Gebruik testframeworks zoals Mocha en Chai om unit tests en integratietests te schrijven. VS Code biedt ingebouwde ondersteuning voor het uitvoeren van tests binnen de editor.

Best practices voor de ontwikkeling van VS Code-extensies

Het volgen van deze best practices helpt u bij het creëren van hoogwaardige, onderhoudbare en gebruiksvriendelijke VS Code-extensies:

• Gebruik TypeScript: TypeScript biedt statische typering, wat helpt om fouten vroegtijdig op te sporen en de onderhoudbaarheid van de code te verbeteren.
• Gebruik asynchrone programmering: Vermijd het blokkeren van de UI-thread door asynchrone programmeertechnieken te gebruiken, zoals async/await.
• Handel fouten netjes af: Implementeer de juiste foutafhandeling om crashes te voorkomen en informatieve foutmeldingen aan de gebruiker te geven.
• Documenteer uw code: Schrijf duidelijke en beknopte documentatie om andere ontwikkelaars te helpen uw extensie te begrijpen en te gebruiken.
• Volg de VS Code Extension Guidelines: Houd u aan de VS Code Extension Guidelines om ervoor te zorgen dat uw extensie zich goed gedraagt en naadloos integreert met de editor. Deze richtlijnen behandelen onderwerpen zoals prestaties, beveiliging en gebruikerservaring.
• Gebruik semantische versiebeheer: Volg de principes van semantische versiebeheer (SemVer) bij het uitbrengen van nieuwe versies van uw extensie.
• Houd uw extensie up-to-date: Werk uw extensie regelmatig bij om nieuwe functies op te nemen, bugs op te lossen en beveiligingsproblemen aan te pakken.
• Internationalisering (i18n) en lokalisatie (l10n): Houd rekening met het wereldwijde publiek van VS Code en ontwerp uw extensie met i18n/l10n in gedachten. Dit omvat het externaliseren van strings en het aanbieden van vertalingen voor verschillende talen.
• Toegankelijkheid: Zorg ervoor dat uw extensie toegankelijk is voor gebruikers met een handicap. Volg de richtlijnen voor toegankelijkheid bij het ontwerpen van uw UI en overweeg het gebruik van ondersteunende technologieën voor het testen.

Uw extensie publiceren

Zodra u tevreden bent met uw extensie, kunt u deze publiceren op de VS Code Marketplace, waardoor deze beschikbaar wordt voor miljoenen ontwikkelaars wereldwijd.

1. Maak een Azure DevOps-account aan: U heeft een Azure DevOps-account nodig om uw extensies te beheren.
2. Installeer de vsce-tool: De VS Code Extension Manager (vsce) is een command-line tool voor het verpakken en publiceren van extensies.

               npm install -g vsce
               
   
                 
                   Copy
                 
               
             

3. Verpak uw extensie:

               vsce package
               
   
                 
                   Copy
                 
               
             

4. Publiceer uw extensie:

               vsce publish
               
   
                 
                   Copy
                 
               
             

Volg de instructies op de VS Code Marketplace-website voor meer gedetailleerde informatie over het publiceren van uw extensie.

Voorbeelden uit de praktijk van JavaScript VS Code-extensies

Hier zijn enkele voorbeelden van populaire JavaScript VS Code-extensies die de kracht van toolintegratie aantonen:

• ESLint: Integreert de ESLint linter in VS Code, en biedt real-time codeanalyse en het markeren van potentiële fouten.
• Prettier: Formatteert JavaScript-code automatisch volgens een consistente stijl.
• JavaScript (ES6) code snippets: Biedt een verzameling nuttige codefragmenten voor JavaScript-ontwikkeling.
• Debugger for Chrome: Hiermee kunt u JavaScript-code die in Chrome wordt uitgevoerd rechtstreeks vanuit VS Code debuggen.
• npm Intellisense: Vult npm-modules automatisch aan in import-statements.

Deze extensies laten zien hoe VS Code kan worden aangepast en uitgebreid om een efficiëntere en productievere ontwikkelomgeving te creëren.

Conclusie

De ontwikkeling van VS Code-extensies is een krachtige manier om uw JavaScript-ontwikkelworkflow te verbeteren, externe tools te integreren en bij te dragen aan de bredere JavaScript-gemeenschap. Door de basisprincipes van de Extension API onder de knie te krijgen, geavanceerde technieken te begrijpen en best practices te volgen, kunt u impactvolle extensies creëren die problemen uit de praktijk oplossen en het leven van ontwikkelaars over de hele wereld verbeteren. Omarm de kracht van uitbreidbaarheid en ontgrendel het volledige potentieel van VS Code!